<template>
    <div class="comp" ref="huan"> <!-- 放置图表的位置 --></div>
</template>

<script  setup>
// 1.引入基础模块（echarts api）
import { inject, ref, onMounted, onBeforeUnmount } from "vue"
const echarts = inject('echarts')
const api = inject('api')

// 2.初始化页面数据
let huan = ref(null)//初始化图表容器ref值
let echartsInstance = null//初始化echarts实例对象
let allData = []//初始化业务数据

// 3.获取echarts绘图实例 设置基础配置项 完成基础图表绘制
function initEcharts() {
    // 3.1获取实例
    echartsInstance = echarts.init(huan.value, 'dark')
    // 3.2设置基础配置项
    let initOptions = {
        title: {
            text: "▍主要地区农作物种植占比",
            top: "3%",
            left: "3%"
        }
    }
    // 3.3完成基础图表绘制
    echartsInstance.setOption(initOptions)
}

// 4.获农业种植面积数据
async function getData() {
    let { data } = await api('cropAreasProportion')
    allData = data
    console.log(data)
    editEcharts()
}

// 5.根据业务继续完善绘图配置项 完善图表
function editEcharts() {
    // 5.1根据数据动态生成图表系列[{type,data,center,radius},{}....]
    let count = allData.length
    let seriesData = allData.map((item, index) => {
        return {
            type: "pie",
            data: [{ name: item.areas + "\n" + item.zb + '%', value: item.zb }, { value: item.other }],
            center: [100 / (count + 1) * (index + 1) + '%', '50%'],
            label: {
                position: "center"
            }
        }
    })

    // 5.2设置绘图配置项k 
    let editOptions = {
        series: seriesData
    }
    // 5.3使用配置项完善图表 合拼新旧配置项
    echartsInstance.setOption(editOptions)

    // 5.4适配方法
    Adaptation()
}

// 6.图表适配方法 坐标系内的  坐标系外的（自己处理）
function Adaptation() {
    // ------------------手动处理适配-------------------
    // 获取自定义比例尺  获取当前图表容器的宽度/100*3.5-3.7(3.6)
    let width = huan.value.offsetWidth
    let scale = width / 100 * 3.6

    // 6.1设置基础配置项
    let seriesData = allData.map((item, index) => {
        return {
            radius: [scale * 1.3, scale * 1.5],
            // itemStyle: {
            //     textStyle: {
            //         fontSize: 50
            //     }
            // },
            textStyle: {
                fontSize: scale
            }
        }
    })
    let initOptions = {
        title: {
            textStyle: {
                fontSize: scale
            },
        },
        series: seriesData
    }
    // 6.2完成基础图表绘制
    echartsInstance.setOption(initOptions)
    // -----------------坐标系内适配----------------------
    // 6.3
    echartsInstance.resize()
}


// 组件挂载完毕执行业务逻辑
onMounted(() => {
    initEcharts()
    getData()
    window.addEventListener('resize', Adaptation)//开启窗口变化监听
})

// 组件销毁移除  防止内存泄露  
onBeforeUnmount(() => {
    window.removeEventListener('resize', Adaptation)
})


</script>

<style scoped></style>